<template>
  <div :class="$style.page" :style="bg">
    <div :class="$style.name">{{data["house"]}} {{data["style"]}}</div>
    <div :class="$style.lp">
      <div :class="$style.lpName">{{data['lpName']}}</div>
      <div :class="$style.lpImg">
        <img src="~/static/images/home.png" alt>
      </div>
      <div :class="$style.design">
        <p :class="$style.p1">DESIGN BY</p>
        <p :class="$style.p2">{{data['designer']['realName']}}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["data"],
  computed: {
    bg() {
      let url = this.data.mlogo;
      return {
        background: `url(${url}) 0 0 no-repeat /cover`
      };
    }
  }
};
</script>
<style lang="less" module>
.page {
  color: #ffae34;
  overflow: hidden;
  .name {
    margin: 523px auto 0;
    width: 666px;
    height: 100px;
    line-height: 100px;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 10px;
    text-align: center;
    font-size: 48px;
  }
  .lp {
    display: flex;
    width: 666px;
    min-height: 247px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    padding: 56px 0;
    margin: 30px auto 0;
    .lpName {
      width: 238px;
      font-size: 38px;
      padding: 10px 34px 0 46px;
      border-right: 1px solid #ffae34;
      line-height: 50px;
    }
    .lpImg {
      width: 176px;
      padding: 48px 64px 0 64px;
      img {
        width: 47px;
        height: 47px;
      }
    }
    .design {
      border-left: 1px solid #ffae34;
      width: 258px;
      padding-left: 20px;
      .p1 {
        font-size: 20px;
        margin: 20px 0 34px 0;
      }
      .p2 {
        font-size: 26px;
      }
    }
  }
}
</style>
